<template>
    <div class="layer">
        <ul class="tool">
            <el-tooltip class="item" effect="light" content="放大" placement="bottom">
                <li class="tool-item" @click="zoomIn"><i class="el-icon-zoom-in" /></li>
            </el-tooltip>
            <el-tooltip class="item" effect="light" content="缩小" placement="bottom">
                <li class="tool-item" @click="zoomOut">
                    <i class="el-icon-zoom-out" />
                </li>
            </el-tooltip>
            <el-tooltip class="item" effect="light" content="重置" placement="bottom">
                <li class="tool-item" @click="reset"><i class="el-icon-aim" /></li>
            </el-tooltip>
        </ul>
        <!-- 创建图层 -->
        <div id="map"></div>
        <div id="mouse-position"></div>
    </div>
</template>

<script>
import olMap from '../../util/lmap/lmap.js' // 引入地图包对象
import geojson from '../../util/json/jm.json'
import GeoJSON from 'ol/format/GeoJSON'
import axios from 'axios'
export default {
    components: {},
    data() {
        return {
            VictorLayer: null
        }
    },
    methods: {
        // 放大
        zoomOut() {
            olMap.utils.zoomOut(olMap.map)
        },
        // 缩小
        zoomIn() {
            olMap.utils.zoomIn(olMap.map)
        },
        // 重置
        reset() {
            olMap.utils.zoomIn(olMap.map)
        }
    },
    async mounted() {
        console.log('aasa')
        let layer = olMap.createWmtsMap()
        olMap.createMap('map')
        olMap.map.addLayer(layer)
        console.log(olMap.map.getLayers())
        olMap.map.addControl(olMap.utils.showMousePosition('mouse-position'))
        this.VictorLayer = olMap.layer.GeoJsonVector(olMap.map)
        this.VictorLayer.setZIndex(1000)
        console.log('geojson', geojson)
        olMap.map.getView().setCenter(olMap.utils.transform([473.07, 22.56]))
        let json = await axios.get('http://127.0.0.1:3005/lifeSite/public/jm.json')
        console.log('----', json.data)
        // let format = new GeoJSON();
        // let features = format.readFeatures(geojson, {
        //     dataProjection: 'EPSG:4326',
        //     featureProjection: 'EPSG:3857',
        // });
        // this.VictorLayer.getSource().addFeatures(features);
        olMap.feature.format({
            type: 'geojson',
            layer: this.VictorLayer,
            data: geojson
        })
    }
}
</script>

<style scoped lang="less">
#map {
    width: 100%;
    height: 500px;
}

.tool {
    display: flex;
    justify-content: flex-start;

    .tool-item {
        padding: 5px 10px;
        cursor: pointer;
    }
}
</style>
